<template>
	<view class="u-wrap" style="background-color: #f3f4f5;">
		<!-- 档案中心 -->
		<u-navbar :is-back="false" :border-bottom="false" title="档案中心" title-color="white"
			:background="{backgroundColor: '#00a8ff'}">
			<view class="navbar-right" slot="right">
				<image src="../../../static/icon/infoicon.png" @click="openinfo('/pages/order/infoContent/infoContent')"
					style="margin-right: 20rpx;width: 25rpx;height: 25rpx;" mode=""></image>
			</view>
		</u-navbar>
		<u-search style="width: 100%;background-color: #00a8ff;" placeholder="请输入患者名称" :clearabled="true"
			v-model="serch" @search="searhList" :show-action="false"
			class="u-padding-left-26 u-padding-right-26 u-p-b-26">
		</u-search>
		<view class="u-m-b-26" style="background-color: #FFFFFF;">
			<view class="">
				<u-grid :col="2" :border="false">
					<u-grid-item style="border-right: #eeeeee 1px solid;height: 25rpx;">
						<view class="grid-text u-font-14" @click="openinfo('/pages/tabBar/archivesCenter/newGrouping')"
							style="color: #3b99ff;">
							<u-icon name="plus" size="24" style="margin-right: 10rpx;"></u-icon>
							添加分组
						</view>
					</u-grid-item>
					<u-grid-item>
						<view class="grid-tKext u-font-14"
							@click="openinfo('/pages/tabBar/archivesCenter/groupingManage')" style="color: #3b99ff;">
							<u-icon name="list-dot" style="margin-right: 10rpx;"></u-icon>
							分组管理
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="container u-skeleton">
			<u-collapse class="u-p-l-26 u-p-r-26" :accordion="false" :arrow="false" style="background-color: #FFFFFF;">
				<u-collapse-item :title="item.name" v-for="(item, index) in groupList" id="itxst" :data-id="item.id"  style="position: relative;"
					:key="index">
					<view class="u-font-12" style="position: absolute;top: 15rpx;right:0%">
						{{item.user_count}}人
					</view>
					<view v-for="(itemList,index) in userList" :key="index"
						@click="openinfo('/pages/tabBar/archivesCenter/selectProject?user_id='+itemList.id+'&user_name='+itemList.nickname+'&user_avatar='+itemList.avatar)"
						class="u-flex u-p-t-26 u-p-b-26 u-m-r-26" style="border-bottom: 1rpx solid #e9e9e9;">
						<!-- 传用户头像 用户id 用户名称 -->
						<u-avatar :src="itemList.avatar" size="70" :fade="true" duration="450" :lazy-load="true"
							class="u-flex-1" style="margin-right: 20rpx;">
						</u-avatar>
						<p class="u-flex-3">{{itemList.nickname}}</p>
						<p class="u-font-10" style="color: #bdbdbd;">{{itemList.date}}</p>
					</view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<!-- <u-toast ref="uToast" /> -->
	</view>
</template>
<script>
	import Sortable from '@/common/Sortable.js';
	 //获取对象
	        // var el = document.getElementById('itxst');
	        // //设置配置
	        // var ops = {
	        //     animation: 1000,
	        //     //拖动结束
	        //     onEnd: function (evt) {
	        //         console.log(evt);
	        //         //获取拖动后的排序
	        //         var arr = sortable.toArray();
	        //         alert(JSON.stringify(arr));
	        //     },
	        // };
	        // //初始化
	        // var sortable = Sortable.create(el, ops);
	export default {

		data() {
			return {

				// 分组列表
				groupList: [],
				// 搜索框
				serch: "",
				// 用户列表
				userList: [],
				
			}
		},
		onLoad() {
			
		},
		onShow() {
			console.debug("进入了档案中心")
			// 检测是否登录
			if (uni.getStorageSync('userInfo') == '') {
				uni.showToast({
					title: '请登陆后操作'
				})
			} else {
				// 获取档案
				this.getGroup();
				// 获取档案用户列表
				this.getUserList();
			}
this.sort();


		},
		methods: {

			sort() {
				var el = document.getElementById('itxst');
				//设置配置
				console.log(el);
				var ops = {
					animation: 1000,
					//拖动结束
					onEnd: function(evt) {
						console.log(evt);
						//获取拖动后的排序
						var arr = sortable.toArray();
						alert(JSON.stringify(arr));
					},
				};
				//初始化
				var sortable = Sortable.create(el, ops);

			},

			// searhList 搜索获取列表 // 搜索获取的用户列表
			searhList() {
				console.log("搜索");
				this.$apiBasics.searchuser({
					name: this.serch
				}).then((res) => {
					console.log('request success', res);
					console.log(res.data.data.items)
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			// 获取档案分组列表
			getGroup() {

				this.$apiBasics.group().then((res) => {
					console.log('request success', res);
					console.log(res.data.data.msg);
					// 分组列表 绑定
					console.log("分组: ");
					this.groupList = res.data.data;


				}).catch((err) => {
					this.groupList = [];
					console.log('request fail', err);
				})

			},
			// 获取用户列表
			getUserList() {
				this.$apiBasics.userlist().then((res) => {
					console.log('request success', res);
					this.userList = res.data.data.items;
				}).catch((err) => {
					console.log('request fail', err);
				})
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>
